<template>
  <van-nav-bar title="申请退款" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ detail.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex" v-if="detail.addrsss">
        <div class="aui-flex-add">
          <img :src="LoginUser.avatar" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ detail.addrsss.consignee }} <em> {{ detail.addrsss.mobile }}</em>
          </h3>
          <p>{{ detail.addrsss.region_text + detail.addrsss.address }}</p>
        </div>
      </div>

      <!-- 退货信息 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="reason"
            is-link
            readonly
            name="picker"
            label="退款类型"
            placeholder="点击选择退款类型"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择退款类型' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="business_reason"
            rows="2"
            autosize
            label="退款原因"
            type="textarea"
            maxlength="120"
            placeholder="请输入退款原因"
            show-word-limit
            :rules="[{ required: true, message: '请填写退款原因' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/order/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const orderid = ref(proxy.$route.query.orderid ?? 0)
const detail = ref({
  addrsss: {}
})
const columns = [
  { text: '仅退款', value: '-1' },
  { text: '退货退款', value: '-2' },
];
// 选择退款类型
const showPicker = ref(false);
const status = ref('')
const reason = ref('');
// 退款原因
const business_reason = ref('')

onBeforeMount(() => {
  getOrderInfoData()
})
const getOrderInfoData = async () => {
  let result = await Api.OrderInfo({ busid: LoginUser.id, orderid: orderid.value })
  if (result.code == 1) {
    detail.value = result.data;
    console.log(detail.value);
  }
}

// 选择退款类型
const onConfirm = ({ selectedOptions }) => {
  reason.value = selectedOptions[0]?.text;
  showPicker.value = false;
  status.value = selectedOptions[0]?.value;
};

// 退货申请提交
const onSubmit = async () => {
  let res = await Api.OrderRefund({
    busid: LoginUser.id,
    orderid: orderid.value,
    business_reason: business_reason.value,
    status: status.value
  })
  if (res.code == 1) {
    showSuccessToast({
      message: res.msg,
      onClose: function () {
        goBack()
      }
    })
  }else{
    showFailToast(res.msg);
  }
}
</script>

<style>
@import url('/assets/css/info.css');
</style>